<template>
  <div style="height: inherit;position: relative;">
    <div ref="SzjjAmap" :class="['SzjjAmap']" :style="{visibility: loading ? 'hidden' : 'visible'}" :id="id"></div>
    <a-spin class="spin-szjjamap" tip="Loading..." v-if="loading"></a-spin>
  </div>

</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { config, apiConfig, options, globalConfig } from './js/config';
import { ALoca } from '@/components/ALoca/index';
import { cockpitMapOrg } from './mapType/index';

export default {
  name: 'SzjjAmap',
  components: {

  },
  props: {
    options: {
      type: Object,
      default: () => {}
    },
    apiConfig: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    options: {
      // handler(n) {
      //   if (n && (n instanceof Object)) {
      //     console.log('======= 获取到了数据 =========');
      //     this.reset();
      //   }
      // },
      // deep: true
    }
  },
  data() {
    return {
      id: 'szjj-map',
      loading: true,
      defaultOptions: JSON.parse(JSON.stringify(options)),
      defaultGlobalConfig: JSON.parse(JSON.stringify(globalConfig)),
      mapType: {
        // 民革地图
        cockpitMapOrg
      },
      showModal: true
    };
  },
  created() {

  },
  mounted() {
    this.updateConfig();
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    updateConfig() {
      const customOption = JSON.parse(JSON.stringify(this.options));
      if (customOption.globalConfig instanceof Object && customOption.globalConfig.map instanceof Object) {
        Object.assign(globalConfig.map, customOption.globalConfig.map);
        delete customOption.globalConfig.map;
      }
      if (customOption.globalConfig instanceof Object) {
        Object.assign(globalConfig, customOption.globalConfig);
        delete customOption.globalConfig;
      }

      Object.assign(options, customOption);
      Object.assign(apiConfig, JSON.parse(JSON.stringify(this.apiConfig || {})));
    },
    setDefaultConfig() {
      Object.assign(options, this.defaultOptions);
      Object.assign(globalConfig, this.defaultGlobalConfig);
      console.log(globalConfig, 'globalConfig');
    },
    init() {
      window._AMapSecurityConfig = {
        securityJsCode: globalConfig.map.securityJsCode
      };
      this.loading = true;
      const that = this;
      const amapConfig = {
        'key': globalConfig.map.key,
        'version': globalConfig.map.version
      };
      AMapLoader.load(amapConfig).then((AMap) => {
        config.AMap = AMap;
        const map = new AMap.Map(that.id, {
          ...globalConfig.map
        });

        config.map = map;

        // 注册可视化组件
        config.ALoca = new ALoca({
          map: map,
          AMap: AMap
        });

        map.on('complete', () => {
          console.log('map complete');
          // 移除底图
          if (globalConfig.hideMapLayer) {
            const layers = [];
            map.setLayers(layers);
          }
          that.loading = false;
          that.mapType[options.mapType]();

          setTimeout(() => {
            console.log(map.getBounds(), 'map.getBounds()');
          }, 6000);

          that.createBg();
          that.$emit('loaded', true);

          // 镇海点击查看历史按钮
          window.showHistory = function(name) {
            const data = that.options.data.find(e => e.name == name);
            that.$emit('showHistory', data);
          };

          window.MAPCLICK = function() {
            that.$emit('mapClick');
            console.log('mapClick');
          };

          window.PolygonTouch = function(data) {
            console.log('PolygonTouch');
            that.$emit('polygonTouch', data);
            // console.log(data);
          };
        });
      }).catch(e => {
        that.loading = false;
        console.log('error', e);
        that.$emit('error', e);
      });
    },
    createBg() {
      const { mapLayerUrl } = globalConfig;
      if (mapLayerUrl) {
        this.$refs.SzjjAmap.style.backgroundImage = `none`;
      } else {
        this.$refs.SzjjAmap.style.backgroundImage = `none`;
      }
    },
    destroyMap() {
      // config.map && config.map.remove(config.map.getLayers());
      // console.log(config.map.getLayers());
      config.map && config.map.clearMap();
      this.setDefaultConfig();
      console.log(this.options);
    },
    reset() {
      this.updateConfig();
      this.init();
    }
  }

};
</script>

<style scoped>
  .SzjjAmap {
    height: inherit;
    min-height: 300px;
    margin-top: 0;
    background: none !important;
  }
</style>
<style lang="less">
@import url('./css/index.less');
@import url('./css/mapModal.less');
</style>
